<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片裁剪</title>
    <link  rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css" />
    <link  rel="stylesheet" type="text/css" href="/static/css/common.css" />
    <style>
        .layui-layer-content{
            padding: 20px;
        }
    </style>
</head>
<body>

<header>

</header>

<div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
        <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <div class="layui-upload-list" style="margin:0">
            <img src="123.jpg" id="srcimgurl" class="layui-upload-img">
        </div>
    </div>
    <div class="layui-input-inline layui-btn-container" style="width: auto;">
        <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button >
    </div>
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>
<script src="/static/plugins/layui/layui.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/static/plugins/modules/'
    }).extend({ //设定模块别名
        croppers: 'cropper/croppers'
    }).use(['form','croppers'], function () {
        var $ = layui.jquery
            ,form = layui.form
            ,croppers = layui.croppers
            ,layer= layui.layer;
    });
</script>
</body>
</html>